<!-- src/views/console/UserManagement.vue -->
<template>
  <div class="min-h-screen bg-gray-50 flex flex-col">
    <!-- 顶部导航 -->
    <nav class="h-24 bg-white shadow-sm fixed w-full z-50 flex items-center justify-between px-8">
      <div class="flex items-center gap-8">
        <!-- 系统Logo -->
        <div class="flex items-center gap-4 bg-slate-800 px-5 py-3 rounded-lg">
          <div class="logo-icon w-12 h-12">
            <svg viewBox="0 0 100 100" fill="none">
              <circle cx="50" cy="50" r="45" stroke="url(#gradient1)" stroke-width="3" fill="none" />
              <circle cx="50" cy="50" r="35" stroke="url(#gradient2)" stroke-width="2" fill="none" />
              <path d="M30 40 L50 30 L70 40 L70 60 L50 70 L30 60 Z" fill="url(#gradient3)"
                opacity="0.8" />
              <circle cx="50" cy="50" r="8" fill="white" />
              <defs>
                <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#4A90E2" />
                  <stop offset="100%" style="stop-color:#7BB3F0" />
                </linearGradient>
                <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#5BA0F2" />
                  <stop offset="100%" style="stop-color:#8CC8FF" />
                </linearGradient>
                <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#4A90E2" />
                  <stop offset="100%" style="stop-color:#6BB0FF" />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div class="flex flex-col">
            <span class="text-xl font-bold text-blue-600">
              EduLiveLink管理系统
            </span>
            <span class="text-xs text-black">
              智能教育平台
            </span>
          </div>
        </div>
      </div>
      <div class="flex items-center gap-4">
        <button
          class="bg-blue-600 text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition-colors"
          @click="goHome">返回首页</button>
      </div>
    </nav>

    <!-- 上方空白区域 -->
    <div class="h-24 bg-white"></div>

    <!-- 主要内容区域 -->
    <div class="flex flex-1">
      <!-- 侧边栏 -->
      <aside class="w-64 bg-white shadow-sm border-r border-gray-200 fixed h-[calc(100vh-6rem)] z-40">
        <div class="p-6">
          <h2 class="text-lg font-semibold text-gray-900 mb-6">控制台导航</h2>
          <ul class="space-y-1">
            <li>
              <router-link to="/console"
                class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
                :class="currentPath === '/console' ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
                <span class="w-5 h-5 flex items-center justify-center">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                  </svg>
                </span>
                <span>控制台首页</span>
              </router-link>
            </li>
            <li>
              <router-link to="/console/usermanagement"
                class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
                :class="currentPath.startsWith('/console/usermanagement') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
                <span class="w-5 h-5 flex items-center justify-center">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2">
                    <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                    <circle cx="8.5" cy="7" r="4"></circle>
                    <line x1="20" y1="8" x2="20" y2="14"></line>
                    <line x1="23" y1="11" x2="17" y2="11"></line>
                  </svg>
                </span>
                <span>用户管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/console/classmanagement"
                class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
                :class="currentPath.startsWith('/console/classmanagement') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
                <span class="w-5 h-5 flex items-center justify-center">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                  </svg>
                </span>
                <span>班级管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/console/coursemanagement"
                class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
                :class="currentPath.startsWith('/console/coursemanagement') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
                <span class="w-5 h-5 flex items-center justify-center">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                    <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                  </svg>
                </span>
                <span>课程管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/console/resources"
                class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
                :class="currentPath.startsWith('/console/resources') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
                <span class="w-5 h-5 flex items-center justify-center">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <line x1="16" y1="13" x2="8" y2="13"></line>
                    <line x1="16" y1="17" x2="8" y2="17"></line>
                    <polyline points="10 9 9 9 8 9"></polyline>
                  </svg>
                </span>
                <span>资源管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/console/settings"
                class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
                :class="currentPath.startsWith('/console/settings') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
                <span class="w-5 h-5 flex items-center justify-center">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2">
                    <circle cx="12" cy="12" r="3"></circle>
                    <path
                      d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
                    </path>
                  </svg>
                </span>
                <span>系统设置</span>
              </router-link>
            </li>
          </ul>
        </div>
      </aside>

      <!-- 主内容区域 -->
      <div class="flex-1 flex flex-col overflow-hidden ml-64">
        <!-- 内容区域 -->
        <main class="flex-1 overflow-y-auto p-6">
          <div class="page-header">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">用户管理</h1>
            <p class="page-description">管理平台所有用户信息，包括查看、编辑和删除用户</p>
          </div>
          <div class="h-12"></div>
          
          <!-- 搜索表单 -->
          <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                <el-input v-model="searchUsername" placeholder="请输入用户名" class="search-input"
                  clearable />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">真实姓名</label>
                <el-input v-model="searchRealName" placeholder="请输入真实姓名" class="search-input"
                  clearable />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                <el-input v-model="searchPhone" placeholder="请输入手机号" class="search-input" clearable />
              </div>
              <div class="flex gap-2 items-end">
                <el-button type="primary" @click="searchUsers" class="search-btn flex-1">
                  搜索
                </el-button>
                <el-button @click="resetSearch" class="search-btn flex-1">
                  重置
                </el-button>
              </div>
            </div>
          </div>

          <!-- 用户列表表格 -->
          <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <!-- 表格容器 -->
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      用户ID</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      用户名</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      密码</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      手机号</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      身份</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      实名认证</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      身份证</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      真实姓名</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      性别</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      年龄</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      创建时间</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      更新时间</th>
                    <th scope="col"
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      操作</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="user in userList" :key="user.id" class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ user.id }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {{ user.username }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      <div class="flex items-center gap-2">
                        <span class="truncate max-w-[120px]">
                          {{ user.showPassword ? user.password : '••••••' }}
                        </span>
                        <button @click="togglePasswordVisibility(user)"
                          class="text-blue-600 hover:text-blue-900 text-xs">
                          {{ user.showPassword ? '隐藏' : '显示' }}
                        </button>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ user.phone }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      <span
                        :class="user.role === '老师' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'"
                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium">
                        {{ user.role }}
                      </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      <span
                        :class="user.realNameVerified === '是' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'"
                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium">
                        {{ user.realNameVerified }}
                      </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      <div class="flex items-center gap-2">
                        <span class="truncate max-w-[120px]">
                          {{ user.showIdCard ? user.idCard : '••••••' }}
                        </span>
                        <button @click="toggleIdCardVisibility(user)"
                          class="text-blue-600 hover:text-blue-900 text-xs">
                          {{ user.showIdCard ? '隐藏' : '显示' }}
                        </button>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      <div class="flex items-center gap-2">
                        <span class="truncate max-w-[100px]">
                          {{ user.showRealName ? user.realName : '••••••' }}
                        </span>
                        <button @click="toggleRealNameVisibility(user)"
                          class="text-blue-600 hover:text-blue-900 text-xs">
                          {{ user.showRealName ? '隐藏' : '显示' }}
                        </button>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ user.gender }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ user.age }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {{ user.createTime }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {{ user.updateTime }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                      <button @click="editUser(user)"
                        class="text-blue-600 hover:text-blue-900 mr-3">
                        编辑
                      </button>
                      <button @click="deleteUser(user)" class="text-red-600 hover:text-red-900">
                        删除
                      </button>
                    </td>
                  </tr>
                  <tr v-if="userList.length === 0">
                    <td colspan="13" class="px-6 py-4 text-center text-sm text-gray-500">
                      暂无用户数据
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- 分页 -->
            <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
              <div class="text-sm text-gray-700">
                共 {{ totalUsers }} 条记录
              </div>
              <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50]" :total="totalUsers" layout="prev, pager, next, sizes"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </div>
        </main>
      </div>
    </div>

    <!-- 编辑用户对话框 -->
    <el-dialog v-model="showEditDialog" :title="'编辑用户'" width="500px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="用户ID" disabled>
          <el-input v-model="form.id" disabled />
        </el-form-item>
        <el-form-item label="用户名" disabled>
          <el-input v-model="form.username" disabled />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" placeholder="不修改请留空" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="身份">
          <el-select v-model="form.role" placeholder="请选择身份">
            <el-option label="老师" value="1" />
            <el-option label="学生" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="实名认证">
          <el-select v-model="form.realNameVerified" placeholder="请选择认证状态">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="form.idCard" />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="form.realName" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="1" />
            <el-option label="女" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" type="number" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog v-model="showDeleteDialog" title="确认删除" width="300px">
      <p>确定要删除用户 <span class="font-medium">{{ deleteUserId }}</span> 吗？</p>
      <template #footer>
        <el-button @click="showDeleteDialog = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确认删除</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import {
    ref,
    reactive,
    onMounted,
    watch
  } from 'vue'
  import {
    useRoute,
    useRouter
  } from 'vue-router'
  import {
    ElMessage
  } from 'element-plus'
  import {
    userManagementAPI
  } from '@/api/usermanagement.js'

  // 路由相关
  const route = useRoute()
  const router = useRouter()
  const currentPath = ref('')

  // 响应式数据
  const userList = ref([])
  const totalUsers = ref(0)
  const currentPage = ref(1)
  const pageSize = ref(10)
  const searchUsername = ref('')
  const searchRealName = ref('')
  const searchPhone = ref('')

  // 对话框状态
  const showEditDialog = ref(false)
  const showDeleteDialog = ref(false)
  const deleteUserId = ref('')

  // 表单数据
  const form = reactive({
    id: '',
    username: '',
    password: '',
    phone: '',
    role: '',
    realNameVerified: '',
    idCard: '',
    realName: '',
    gender: '',
    age: '',
  })

  // 密码显示/隐藏控制
  const togglePasswordVisibility = (user) => {
    user.showPassword = !user.showPassword;
  }

  // 身份证显示/隐藏控制
  const toggleIdCardVisibility = (user) => {
    user.showIdCard = !user.showIdCard;
  }

  // 真实姓名显示/隐藏控制
  const toggleRealNameVisibility = (user) => {
    user.showRealName = !user.showRealName;
  }

  // 返回首页
  const goHome = () => {
    router.push('/');
  }

  // 获取用户列表
  const getUsers = async () => {
    try {
      // 构造查询参数
      const params = {
        pageNum: currentPage.value,
        pageSize: pageSize.value
      };

      // 只有当搜索条件不为空时才添加到参数中
      if (searchUsername.value) {
        params.username = searchUsername.value;
      }
      if (searchRealName.value) {
        params.realName = searchRealName.value;
      }
      if (searchPhone.value) {
        params.phone = searchPhone.value;
      }

      const response = await userManagementAPI.getUsers(params);

      // 处理响应数据
      if (response && response.code === 0) {
        const resultData = response.data || {};
        const userListData = (resultData.userList || []).map(user => ({
          ...user,
          // 确保所有字段都有默认值
          id: user.id || '',
          username: user.username || '',
          password: user.password || '',
          phone: user.phone || '',
          role: user.role === 1 ? '老师' : (user.role === 2 ? '学生' : '未知'),
          realName: user.realName || '',
          idCard: user.idCard || '',
          gender: user.gender === 1 ? '男' : (user.gender === 2 ? '女' : '未知'),
          realNameVerified: user.realNameVerified === 1 ? '是' : '否',
          age: user.age || '',
          createTime: user.createTime || '',
          updateTime: user.updateTime || '',
          showPassword: false,
          showIdCard: false,
          showRealName: false
        }));

        userList.value = userListData;
        totalUsers.value = resultData.totalUsers || 0;

        if (userList.value.length === 0) {
          let message = '暂无用户数据';
          if (searchUsername.value || searchRealName.value || searchPhone.value) {
            message = '未找到匹配的用户，请尝试其他搜索条件';
          }
          ElMessage.info(message);
        }
      } else {
        ElMessage.error('获取用户列表失败：' + (response?.msg || '未知错误'));
        userList.value = [];
        totalUsers.value = 0;
      }
    } catch (error) {
      ElMessage.error('获取用户列表失败：' + (error.response?.data?.msg || error.message || '网络错误'));
      console.error('获取用户列表失败:', error);
      userList.value = [];
      totalUsers.value = 0;
    }
  };

  // 搜索用户
  const searchUsers = () => {
    currentPage.value = 1
    getUsers()
  }

  // 重置搜索条件
  const resetSearch = () => {
    searchUsername.value = '';
    searchRealName.value = '';
    searchPhone.value = '';
    currentPage.value = 1;
    getUsers()
  }

  // 编辑用户
  const editUser = (user) => {
    // 转换文本状态为数字值
    Object.assign(form, {
      ...user,
      role: user.role === '老师' ? 1 : (user.role === '学生' ? 2 : 0),
      gender: user.gender === '男' ? 1 : (user.gender === '女' ? 2 : 0),
      realNameVerified: user.realNameVerified === '是' ? 1 : 0
    });
    showEditDialog.value = true;
  }

  // 保存用户编辑
  const saveUser = async () => {
    try {
      const userData = {
        ...form,
        role: parseInt(form.role),
        gender: parseInt(form.gender),
        realNameVerified: parseInt(form.realNameVerified),
        age: form.age ? parseInt(form.age) : null
      };

      // 如果密码为空，则不更新密码
      if (!userData.password) {
        delete userData.password;
      }

      const response = await userManagementAPI.updateUser(userData);

      if (response && response.code === 0) {
        showEditDialog.value = false;
        ElMessage.success('保存成功');
        getUsers();
      } else {
        ElMessage.error('保存失败：' + (response?.msg || '未知错误'));
      }
    } catch (error) {
      ElMessage.error('保存失败：' + (error.response?.data?.msg || error.message || '网络错误'));
      console.error(error);
    }
  }

  // 确认删除
  const confirmDelete = async () => {
    try {
      const response = await userManagementAPI.deleteUser(deleteUserId.value);

      if (response && response.code === 0) {
        showDeleteDialog.value = false;
        ElMessage.success('删除成功');
        getUsers();
      } else {
        ElMessage.error('删除失败：' + (response?.msg || '未知错误'));
      }
    } catch (error) {
      ElMessage.error('删除失败：' + (error.response?.data?.msg || error.message || '网络错误'));
      console.error(error);
    }
  }

  // 删除用户
  const deleteUser = (user) => {
    deleteUserId.value = user.id;
    showDeleteDialog.value = true;
  }

  // 分页大小变化
  const handleSizeChange = (size) => {
    pageSize.value = size;
    currentPage.value = 1;
    getUsers();
  }

  // 页码变化
  const handleCurrentChange = (page) => {
    currentPage.value = page;
    getUsers();
  }

  // 组件挂载时
  onMounted(() => {
    currentPath.value = route.path;
    getUsers();
  })

  // 监听路由变化
  watch(() => route.path, (newPath) => {
    currentPath.value = newPath;
  })
</script>

<style scoped>
  .search-input {
    height: 40px !important;
  }

  .search-btn {
    height: 40px !important;
    padding: 0 15px !important;
  }

  .page-header {
    margin-bottom: 2rem;
  }

  .page-description {
    color: #6b7280;
    font-size: 1rem;
  }
  
  .logo-icon {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  }

  .logo-icon svg {
    width: 100%;
    height: 100%;
  }
</style>
